import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {AtInput} from "taro-ui";
import {Button, View} from '@tarojs/components'
import {vcmonitor} from "../../utils/tools";
import {http} from "../../utils/http";
import {CHECK_CODE, SEND_CODE, MERGE_USER} from "../../constants/api";
import './accountConsolidation.scss'

interface StateType {
  code: string
  phone: string
  count: number
  disabled: boolean
  showButton: boolean
}

class Search extends Component {
  state: StateType = {
    code: '',
    phone: '',
    count: 60,
    disabled: false,
    showButton: true
  }

  async UNSAFE_componentWillMount() {
    const phone = Taro.getStorageSync('wxPhone')
    if (phone && phone.length === 1) {
      this.setState({phone})
    }
    vcmonitor(this)
  }

  handlerChange(field, value) {
    this.setState({[field]: value})
  }

  getCode() {
    this.setState({disabled: true}, async () => {
      try {
        const data = await http.carGet(SEND_CODE, {phone: this.state.phone})
        if (!data) {
          this.setState({disabled: false})
          return false
        }
        await Taro.showToast({title: '验证码已发送至您的手机，请注意查收', icon: 'none'})
        const TIME_COUNT = 60
        if (!this.timer) {
          this.setState({count: TIME_COUNT, showButton: false}, async () => {
            this.timer = setInterval(() => {
              const count = this.state.count
              if (count > 0 && count <= TIME_COUNT) {
                this.setState({count: count - 1})
              } else {
                clearInterval(this.timer)
                this.timer = null
                this.setState({count: 60, showButton: true})
              }
            }, 1000)
          })
        } else {
          this.setState({showButton: true})
        }
        this.setState({disabled: false})
      } catch (e) {
        this.setState({disabled: false})
      }
    })
  }

  async handlerSubmit() {
    if (!this.state.code) {
      return Taro.showToast({title: '请输入验证码', mask: true, icon: 'none'})
    }
    if (!this.state.phone) {
      return Taro.showToast({title: '请输入手机号', mask: true, icon: 'none'})
    }
    const data = await http.postCar(CHECK_CODE, {code: this.state.code})
    if (data) {
      const ret = await http.postCar(MERGE_USER, {phone: this.state.phone})
      if (ret) {
        await Taro.showToast({title: '绑定成功', mask: true, duration: 2000, icon: 'none'})
        setTimeout(() => {
          Taro.navigateBack()
        }, 2000)
      }
    }
  }

  timer: any

  render() {
    const {code, phone, disabled, showButton, count} = this.state
    return (
      <View className='account-consolidation'>
        <AtInput
          name='phone'
          border={false}
          title='手机号码'
          type='phone'
          className='phone'
          placeholder='请输入手机号码'
          value={phone}
          onChange={this.handlerChange.bind(this, 'phone')}
        >
          {showButton && <Button disabled={disabled} onClick={this.getCode.bind(this)}>发送验证码</Button>}
          {!showButton && <View>{count}s后重新获取</View>}
        </AtInput>
        <AtInput
          name='code'
          clear
          title='验证码'
          type='text'
          maxLength={6}
          placeholder='请输入验证码'
          value={code}
          onChange={this.handlerChange.bind(this, 'code')}
        />
        <Button className='account-consolidation-btn' onClick={this.handlerSubmit.bind(this)}>合并账号</Button>
      </View>
    )
  }
}

export default Search as ComponentClass
